<template>
  <div
    class="mpd-container"
    v-if="editorMode === true"
    :class="[editorMode ? 'theme-dark display-flex editor-mode' : '']"
    :id="currentId"
  >
    <div class="display-flex flex-direction-column flex-size-auto">
      <title-bar @mpdSave="mpdSave"></title-bar>
      <workspace></workspace>
      <status-bar></status-bar>
    </div>
  </div>
  <page-preview-dom v-else class="mpd-container" :mConfig="mpdPageConfig"></page-preview-dom>
</template>

<script>
import TitleBar from './title-bar'
import Workspace from './workspace'
import StatusBar from './status-bar'
import PagePreviewDom from './workspace/page-preview'
import { uuid } from '@/util/utils'
import { initDomValue, optimizeMpdPageConfig } from '@/util/pageUtil'
import _ from 'lodash'

export default {
  name: 'MagicPageDesigner',
  components: {
    TitleBar,
    Workspace,
    StatusBar,
    PagePreviewDom
  },
  props: {
    // 全局页面配置
    mpdPageConfig: {
      type: Object,
      default() {
        return {
          id: uuid(),
          title: '页面',
          mpdConfig: {
            component: 'div'
          },
          // 页面子节点
          children: []
        }
      }
    },
    // 当前选中的PageNodeDom
    selectPageNodeDom: {
      type: Object,
      default() {
        return {
          // 当前选中的item
          item: {},
          // 当前拖拽的item
          dragItem: {},
          // 标记是否拖拽的值放入成功
          dragFlag: false,
          // slot配置选中的item
          slotItem: {}
        }
      }
    },
    // 页面内记录的值
    mpdPageValue: {
      type: Object,
      default() {
        return {}
      }
    },
    // 是否编辑模式
    editorMode: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  computed: {
    currentId() {
      return this.editorMode === false ? this.mpdPageConfig.id : uuid()
    },
    currentContainer() {
      return document.getElementById(this.currentId)
    }
  },
  provide() {
    return {
      mpdContainer: () => this.currentContainer,
      mpdPageConfig: this.mpdPageConfig,
      selectPageNodeDom: this.selectPageNodeDom,
      mpdPageValue: this.mpdPageValue
    }
  },
  methods: {
    mpdSave(optimize) {
      const mpdPageConfig = _.cloneDeep(this.mpdPageConfig)
      // 是否优化json结构
      if (optimize !== false) {
        optimizeMpdPageConfig(mpdPageConfig)
      }
      this.$emit('mpdSave', mpdPageConfig)
    }
  },
  beforeMount() {
    // 初始化默认值，防止后续使用出错
    initDomValue(this.mpdPageConfig)
    this.mpdPageConfig.title = this.mpdPageConfig.title || '页面'
    this.mpdPageConfig.mpdConfig.component = this.mpdPageConfig.mpdConfig.component || 'div'
    // 初始化选中值对象
    this.$set(this.selectPageNodeDom, 'item', this.selectPageNodeDom.item || {})
    // 初始化拖拽对象
    this.$set(this.selectPageNodeDom, 'dragItem', this.selectPageNodeDom.dragItem || {})
    this.$set(this.selectPageNodeDom, 'dragFlag', this.selectPageNodeDom.dragFlag || {})
    this.$set(this.selectPageNodeDom, 'slotItem', this.selectPageNodeDom.slotItem || {})
  }
}
</script>

<style lang="less">
.mpd-container {
  &.editor-mode {
    width: 100%;
    height: 100%;
  }
}
</style>
